<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style type="text/css">
        * {

            margin: 0;
            padding: 0;
        }

        canvas {

            display: block;
            margin: 0 auto;
            border: 1px #888 solid;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script type="text/javascript">
        
        var canvas = document.querySelector("canvas");

        canvas.width = 800;
        canvas.height = 600;

        var ctx = canvas.getContext("2d");

        var speedX = 10;
        var speedY = 10;

        var x = canvas.width/2;
        var y = canvas.height/2;
        var r = 70;

        function move() {

            if (x+r+speedX > canvas.width || x-r+speedX < 0) {

                speedX = -speedX;
            }

            if(y+r+speedY > canvas.height || y-r+speedY < 0) {

                speedY = -speedY;
            }

            x += speedX;
            y += speedY;
        }

        function drawArc(x, y, r) {

        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.beginPath()
        ctx.arc(x, y, r, 0, Math.PI*2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
        }
    </script>
</body>
</html>